<div class="d-flex flex-column h-100">
  <div class="d-flex mb-3">
    <h1 class="flex-grow-1 m-0" mat-dialog-title>
      {{ assetProfile?.name ?? data.symbol }}
    </h1>
    <button
      class="mx-1 no-min-width px-2"
      mat-button
      type="button"
      [matMenuTriggerFor]="assetProfileActionsMenu"
      (click)="$event.stopPropagation()"
    >
      <ion-icon name="ellipsis-vertical" />
    </button>
    <mat-menu
      #assetProfileActionsMenu="matMenu"
      class="no-max-width"
      xPosition="before"
    >
      <button mat-menu-item type="button" (click)="initialize()">
        <ng-container i18n>Refresh</ng-container>
      </button>
      <button
        mat-menu-item
        type="button"
        [disabled]="
          assetProfileForm.dirty || !assetProfileForm.controls.isActive.value
        "
        [matMenuTriggerFor]="gatherHistoricalMarketDataMenu"
        (click)="
          onGatherSymbol({ dataSource: data.dataSource, symbol: data.symbol })
        "
      >
        <ng-container i18n>Gather Historical Market Data</ng-container>
      </button>
      <mat-menu #gatherHistoricalMarketDataMenu="matMenu">
        @for (dateRange of dateRangeOptions; track dateRange.value) {
          <button
            mat-menu-item
            type="button"
            (click)="
              onGatherSymbol({
                dataSource: data.dataSource,
                range: dateRange.value,
                symbol: data.symbol
              })
            "
          >
            {{ dateRange.label }}
          </button>
        }
      </mat-menu>
      <button
        mat-menu-item
        type="button"
        [disabled]="
          assetProfileForm.dirty || !assetProfileForm.controls.isActive.value
        "
        (click)="
          onGatherProfileDataBySymbol({
            dataSource: data.dataSource,
            symbol: data.symbol
          })
        "
      >
        <ng-container i18n>Gather Profile Data</ng-container>
      </button>
      <hr class="m-0" />
      <button
        mat-menu-item
        type="button"
        [disabled]="
          !adminMarketDataService.hasPermissionToDeleteAssetProfile({
            activitiesCount: assetProfile?.activitiesCount,
            isBenchmark: isBenchmark,
            symbol: data.symbol
          })
        "
        (click)="
          onDeleteProfileData({
            dataSource: data.dataSource,
            symbol: data.symbol
          })
        "
      >
        <ng-container i18n>Delete</ng-container>
      </button>
    </mat-menu>
  </div>

  <div class="flex-grow-1" mat-dialog-content>
    <gf-line-chart
      class="mb-4"
      [colorScheme]="user?.settings?.colorScheme"
      [historicalDataItems]="historicalDataItems"
      [isAnimated]="true"
      [label]="
        isUUID(data.symbol) ? (assetProfile?.name ?? data.symbol) : data.symbol
      "
      [locale]="data.locale"
      [showXAxis]="true"
      [showYAxis]="true"
    />

    <mat-tab-group
      animationDuration="0ms"
      [dynamicHeight]="true"
      [mat-stretch-tabs]="false"
    >
      <mat-tab>
        <ng-template mat-tab-label>
          <ion-icon name="reader-outline" />
          <div class="d-none d-sm-block ml-2" i18n>Overview</div>
        </ng-template>
        <div class="container mt-3 p-0">
          <div class="row w-100">
            @if (isEditAssetProfileIdentifierMode) {
              <div class="col-12 mb-4">
                <form
                  class="align-items-center d-flex"
                  [formGroup]="assetProfileIdentifierForm"
                  (keyup.enter)="
                    assetProfileIdentifierForm.valid &&
                      onSubmitAssetProfileIdentifierForm()
                  "
                  (ngSubmit)="onSubmitAssetProfileIdentifierForm()"
                >
                  <mat-form-field
                    appearance="outline"
                    class="gf-spacer without-hint"
                  >
                    <mat-label i18n>Name, symbol or ISIN</mat-label>
                    <gf-symbol-autocomplete
                      formControlName="assetProfileIdentifier"
                      [includeIndices]="true"
                    />
                  </mat-form-field>
                  <button
                    class="ml-2 no-min-width px-2"
                    color="primary"
                    mat-flat-button
                    type="submit"
                    [disabled]="
                      assetProfileIdentifierForm.hasError(
                        'invalidData',
                        'assetProfileIdentifier'
                      ) ||
                      assetProfileIdentifierForm.hasError(
                        'equalsPreviousProfileIdentifier'
                      )
                    "
                  >
                    <ng-container i18n>Apply</ng-container>
                  </button>
                  <button
                    class="ml-2 no-min-width px-2"
                    mat-button
                    type="button"
                    (click)="onCancelEditAssetProfileIdentifierMode()"
                  >
                    <ng-container i18n>Cancel</ng-container>
                  </button>
                </form>
              </div>
            } @else {
              <div class="col-6 mb-3">
                <gf-value i18n size="medium" [value]="assetProfile?.symbol"
                  >Symbol</gf-value
                >
              </div>
              <div class="col-6 mb-3">
                <gf-value
                  i18n
                  size="medium"
                  [value]="
                    assetProfile?.dataProviderInfo?.name ??
                    assetProfile?.dataSource
                  "
                  >Data Source</gf-value
                >
                <div
                  class="edit-asset-profile-identifier-container position-absolute"
                >
                  <button
                    class="h-100 no-min-width px-2"
                    mat-button
                    type="button"
                    [disabled]="!canSaveAssetProfileIdentifier"
                    [ngClass]="{
                      'd-none': !canEditAssetProfileIdentifier
                    }"
                    (click)="onSetEditAssetProfileIdentifierMode()"
                  >
                    <ion-icon name="create-outline" />
                  </button>
                </div>
              </div>
            }
            <div class="col-6 mb-3">
              <gf-value i18n size="medium" [value]="assetProfile?.currency"
                >Currency</gf-value
              >
            </div>
            <div class="col-6 mb-3"></div>
            <div class="col-6 mb-3">
              <gf-value
                i18n
                size="medium"
                [isDate]="assetProfile?.dateOfFirstActivity ? true : false"
                [locale]="data.locale"
                [value]="assetProfile?.dateOfFirstActivity ?? '-'"
                >First Activity</gf-value
              >
            </div>
            <div class="col-6 mb-3">
              <gf-value
                i18n
                size="medium"
                [locale]="data.locale"
                [value]="assetProfile?.activitiesCount"
                >Activities</gf-value
              >
            </div>
            <div class="col-6 mb-3">
              <gf-value
                i18n
                size="medium"
                [hidden]="!assetClassLabel"
                [value]="assetClassLabel"
                >Asset Class</gf-value
              >
            </div>
            <div class="col-6 mb-3">
              <gf-value
                i18n
                size="medium"
                [hidden]="!assetSubClassLabel"
                [value]="assetSubClassLabel"
                >Asset Sub Class</gf-value
              >
            </div>
            @if (
              assetProfile?.countries?.length > 0 ||
              assetProfile?.sectors?.length > 0
            ) {
              @if (
                assetProfile?.countries?.length === 1 &&
                assetProfile?.sectors?.length === 1
              ) {
                @if (assetProfile?.sectors?.length === 1) {
                  <div class="col-6 mb-3">
                    <gf-value
                      i18n
                      size="medium"
                      [locale]="data.locale"
                      [value]="assetProfile?.sectors[0].name"
                      >Sector</gf-value
                    >
                  </div>
                }
                @if (assetProfile?.countries?.length === 1) {
                  <div class="col-6 mb-3">
                    <gf-value
                      i18n
                      size="medium"
                      [locale]="data.locale"
                      [value]="assetProfile?.countries[0].name"
                      >Country</gf-value
                    >
                  </div>
                }
              } @else {
                <div class="col-md-6 mb-3">
                  <div class="h5" i18n>Sectors</div>
                  <gf-portfolio-proportion-chart
                    [colorScheme]="data.colorScheme"
                    [data]="sectors"
                    [isInPercent]="true"
                    [keys]="['name']"
                    [maxItems]="10"
                  />
                </div>
                <div class="col-md-6 mb-3">
                  <div class="h5" i18n>Countries</div>
                  <gf-portfolio-proportion-chart
                    [colorScheme]="data.colorScheme"
                    [data]="countries"
                    [isInPercent]="true"
                    [keys]="['name']"
                    [maxItems]="10"
                  />
                </div>
              }
            }
          </div>
          <form
            #assetProfileFormElement
            [formGroup]="assetProfileForm"
            (keyup.enter)="assetProfileForm.valid && onSubmitAssetProfileForm()"
            (ngSubmit)="onSubmitAssetProfileForm()"
          >
            <div class="mt-3">
              <mat-form-field appearance="outline" class="w-100 without-hint">
                <mat-label i18n>Name</mat-label>
                <input formControlName="name" matInput type="text" />
              </mat-form-field>
            </div>
            @if (assetProfile?.dataSource === 'MANUAL') {
              <div class="mt-3">
                <mat-form-field appearance="outline" class="w-100 without-hint">
                  <mat-label i18n>Currency</mat-label>
                  <gf-currency-selector
                    formControlName="currency"
                    [currencies]="currencies"
                  />
                </mat-form-field>
              </div>
            }
            <div class="mt-3">
              <mat-form-field appearance="outline" class="w-100 without-hint">
                <mat-label i18n>Asset Class</mat-label>
                <mat-select formControlName="assetClass">
                  <mat-option [value]="null" />
                  @for (
                    assetClassOption of assetClassOptions;
                    track assetClassOption.id
                  ) {
                    <mat-option [value]="assetClassOption.id">{{
                      assetClassOption.label
                    }}</mat-option>
                  }
                </mat-select>
              </mat-form-field>
            </div>
            <div class="mt-3">
              <mat-form-field appearance="outline" class="w-100 without-hint">
                <mat-label i18n>Asset Sub Class</mat-label>
                <mat-select formControlName="assetSubClass">
                  <mat-option [value]="null" />
                  @for (
                    assetSubClassOption of assetSubClassOptions;
                    track assetSubClassOption.id
                  ) {
                    <mat-option [value]="assetSubClassOption.id">{{
                      assetSubClassOption.label
                    }}</mat-option>
                  }
                </mat-select>
              </mat-form-field>
            </div>
            <div class="d-flex my-3">
              <div class="w-50">
                <mat-checkbox
                  color="primary"
                  [checked]="isBenchmark"
                  [disabled]="isEditAssetProfileIdentifierMode"
                  (change)="
                    isBenchmark
                      ? onUnsetBenchmark({
                          dataSource: data.dataSource,
                          symbol: data.symbol
                        })
                      : onSetBenchmark({
                          dataSource: data.dataSource,
                          symbol: data.symbol
                        })
                  "
                >
                  <ng-container i18n>Include in</ng-container>
                  <ng-container>&nbsp;</ng-container>
                  <ng-container i18n>Benchmark</ng-container>
                  <ng-container> / </ng-container>
                  <ng-container i18n>Markets</ng-container>
                </mat-checkbox>
              </div>
            </div>
            <div class="mt-3">
              <mat-form-field appearance="outline" class="w-100">
                <mat-label i18n>Symbol Mapping</mat-label>
                <textarea
                  cdkTextareaAutosize
                  formControlName="symbolMapping"
                  matInput
                  type="text"
                ></textarea>
              </mat-form-field>
            </div>
            @if (assetProfile?.dataSource === 'MANUAL') {
              <div class="mb-3">
                <mat-accordion class="my-3">
                  <mat-expansion-panel
                    class="shadow-none"
                    [expanded]="
                      assetProfileForm.controls.scraperConfiguration.controls
                        .selector.value !== '' &&
                      assetProfileForm.controls.scraperConfiguration.controls
                        .url.value !== ''
                    "
                    (closed)="scraperConfiguationIsExpanded.set(false)"
                    (opened)="scraperConfiguationIsExpanded.set(true)"
                  >
                    <mat-expansion-panel-header class="p-0 pr-3">
                      <mat-panel-title class="font-weight-bold" i18n
                        >Scraper Configuration</mat-panel-title
                      >
                    </mat-expansion-panel-header>
                    <div formGroupName="scraperConfiguration">
                      <div class="mt-3">
                        <mat-form-field
                          appearance="outline"
                          class="w-100 without-hint"
                        >
                          <mat-label i18n>Default Market Price</mat-label>
                          <input
                            formControlName="defaultMarketPrice"
                            matInput
                            type="number"
                          />
                        </mat-form-field>
                      </div>
                      <div class="mt-3">
                        <mat-form-field
                          appearance="outline"
                          class="w-100 without-hint"
                        >
                          <mat-label i18n>HTTP Request Headers</mat-label>
                          <textarea
                            cdkTextareaAutosize
                            formControlName="headers"
                            matInput
                            type="text"
                            [matAutocomplete]="auto"
                          ></textarea>
                        </mat-form-field>
                      </div>
                      <div class="mt-3">
                        <mat-form-field
                          appearance="outline"
                          class="w-100 without-hint"
                        >
                          <mat-label i18n>Locale</mat-label>
                          <input
                            formControlName="locale"
                            matInput
                            type="text"
                          />
                        </mat-form-field>
                      </div>
                      <div class="mt-3">
                        <mat-form-field
                          appearance="outline"
                          class="w-100 without-hint"
                        >
                          <mat-label i18n>Mode</mat-label>
                          <mat-select formControlName="mode">
                            @for (modeValue of modeValues; track modeValue) {
                              <mat-option [value]="modeValue.value">{{
                                modeValue.viewValue
                              }}</mat-option>
                            }
                          </mat-select>
                        </mat-form-field>
                      </div>
                      <div class="mt-3">
                        <mat-form-field
                          appearance="outline"
                          class="w-100 without-hint"
                        >
                          <mat-label>
                            <ng-container i18n>Selector</ng-container>*
                          </mat-label>
                          <textarea
                            cdkTextareaAutosize
                            formControlName="selector"
                            matInput
                            type="text"
                          ></textarea>
                        </mat-form-field>
                      </div>
                      <div class="mt-3">
                        <mat-form-field
                          appearance="outline"
                          class="w-100 without-hint"
                        >
                          <mat-label>
                            <ng-container i18n>Url</ng-container>*
                          </mat-label>
                          <input formControlName="url" matInput type="text" />
                        </mat-form-field>
                      </div>
                      <div class="my-3 text-right">
                        <button
                          color="accent"
                          mat-flat-button
                          type="button"
                          [disabled]="
                            assetProfileForm.controls.scraperConfiguration
                              .controls.selector.value === '' ||
                            assetProfileForm.controls.scraperConfiguration
                              .controls.url.value === ''
                          "
                          (click)="onTestMarketData()"
                        >
                          <ng-container i18n>Test</ng-container>
                        </button>
                      </div>
                    </div>
                  </mat-expansion-panel>
                </mat-accordion>
              </div>
            }
            @if (assetProfile?.dataSource === 'MANUAL') {
              <div>
                <mat-form-field appearance="outline" class="w-100">
                  <mat-label i18n>Sectors</mat-label>
                  <textarea
                    cdkTextareaAutosize
                    formControlName="sectors"
                    matInput
                    type="text"
                  ></textarea>
                </mat-form-field>
              </div>
              <div>
                <mat-form-field appearance="outline" class="w-100">
                  <mat-label i18n>Countries</mat-label>
                  <textarea
                    cdkTextareaAutosize
                    formControlName="countries"
                    matInput
                    type="text"
                  ></textarea>
                </mat-form-field>
              </div>
            }
            <div>
              <mat-form-field appearance="outline" class="w-100 without-hint">
                <mat-label i18n>Url</mat-label>
                <input formControlName="url" matInput type="text" />
                @if (assetProfileForm.get('url').value) {
                  <gf-entity-logo
                    class="mr-3"
                    matSuffix
                    [url]="assetProfileForm.get('url').value"
                  />
                }
              </mat-form-field>
            </div>
            <div class="mt-3">
              <mat-form-field appearance="outline" class="w-100">
                <mat-label i18n>Note</mat-label>
                <textarea
                  cdkAutosizeMinRows="2"
                  cdkTextareaAutosize
                  formControlName="comment"
                  matInput
                  (keyup.enter)="$event.stopPropagation()"
                ></textarea>
              </mat-form-field>
            </div>
          </form>
        </div>
      </mat-tab>
      <mat-tab>
        <ng-template mat-tab-label>
          <ion-icon name="server-outline" />
          <div class="d-none d-sm-block ml-2" i18n>Historical Market Data</div>
        </ng-template>
        <div class="container mt-3 p-0">
          <div class="no-gutters row w-100">
            <div class="col-12">
              <gf-historical-market-data-editor
                [currency]="assetProfile?.currency"
                [dataSource]="data.dataSource"
                [dateOfFirstActivity]="assetProfile?.dateOfFirstActivity"
                [locale]="data.locale"
                [marketData]="marketDataItems"
                [symbol]="data.symbol"
                [user]="user"
                (marketDataChanged)="onMarketDataChanged($event)"
              />
            </div>
          </div>
        </div>
      </mat-tab>
    </mat-tab-group>
  </div>

  <div class="d-flex" mat-dialog-actions>
    <div class="gf-spacer">
      <mat-checkbox
        color="primary"
        [checked]="isDataGatheringEnabled && (assetProfile?.isActive ?? false)"
        [disabled]="!isDataGatheringEnabled || isEditAssetProfileIdentifierMode"
        (change)="onToggleIsActive($event)"
      >
        <ng-container i18n>Data Gathering</ng-container>
      </mat-checkbox>
    </div>
    <button mat-button type="button" (click)="onClose()">
      @if (assetProfileForm.dirty) {
        <ng-container i18n>Cancel</ng-container>
      } @else {
        <ng-container i18n>Close</ng-container>
      }
    </button>
    <button
      color="primary"
      mat-flat-button
      [disabled]="!(assetProfileForm.dirty && assetProfileForm.valid)"
      (click)="onTriggerSubmitAssetProfileForm()"
    >
      <ng-container i18n>Save</ng-container>
    </button>
  </div>
</div>
